<template>
  <div class="container">
    <div class="visual-header">
      <div class="tips-warning center">
      已添加<span class="t5"> {{familys.length}} </span>人，还能添加<span class="t5"> {{6-familys.length}} </span>人
      </div>
    </div>
    <div class="infinite-container visual-content" style="bottom:40px;">
        <div class="mg10" v-show="familys.length > 0">
          <!-- <transition-group name="slide-left" mode="out-in"> -->
          <mu-flexbox  class="family-item bgwhite animate" v-for="(f, i) in familys" :key="f.uid" >
          <mu-flexbox-item>
              <div class="family-header">
                <span class="title">{{f.realname}}</span>
                <i :class="['iconfont', f.sexcode===1 ? 'icon-iconnan': 'icon-iconnv']"></i>
                <small class="t3">{{getFamilyRalation(f.relation)}}</small>
                <span class="fr t3 f12" @click="familyClick(f, i)">修改资料<i class="iconfont icon-small-arrow-right t3 v-middle"></i></span>
              </div>
              <mu-divider />
              <div class="re">
              <p v-for="(item, index) in f.listHisBusCard" :key="index">
                {{item.patientBusCardTypeDes}} - {{item.patientBusCardNumber}} 
                <span v-if="item.patientIsHasBusCard === 1">(余额{{item.patientBusCardBalance | fixedMoney}})</span>
                <span v-else>(未办卡)</span>
              </p>
              <div class="right-button">
                <mu-raised-button primary class="fr small" v-if="f.certificationValidityPeriod === '1'"  @click="goBindCard(f)">认证管理</mu-raised-button>
                <mu-raised-button secondary class="fr small" v-else @click="goBindCard(f)">去认证</mu-raised-button>
              </div>
              </div>
            </mu-flexbox-item>
          </mu-flexbox>
             <!-- </transition-group> -->
        </div>

    </div>

  <div class="fixed-bottom" v-show="familys.length < 6">
      <mu-raised-button class="submit-btn no-shadow" label=" + 添加就诊人" to="/setting/family/add" fullWidth primary></mu-raised-button>
  </div>

    </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
import {CARD_TYPE, FAMILY_RALATION, HIS_CARD_TYPE} from '@/api/const'

export default {
  data () {
    return {
      familys: []
    }
  },
  mounted () {
    this.getFamilys()
  },
  filters: {
    getHisCard (v) {
      if (v === '5') {
        return '门诊号'
      }
      return HIS_CARD_TYPE.filter(val => val.value === v)[0].label
    }
  },
  methods: {
    goBindCard (f) {
      sessionStorage.editFamily = JSON.stringify(f)
      this.$router.push({
        path: f.certificationValidityPeriod === '1' ? '/setting/bind-visitcard-modify' : '/setting/bind-visitcard'
      })
    },
    getCardName (cardType) {
      return CARD_TYPE.filter(v => v.value === cardType)[0].label
    },
    getFamilyRalation (relation) {
      if (relation === '0') {
        return '本人'
      }
      return FAMILY_RALATION.filter(v => v.value === relation)[0].label
    },
    getFamilys () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(`${RESTFUL_API.listFamily}`, {[this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME]}).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.familys = res.data.data || []
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
      })
    },
    familyClick (f, i) {
      sessionStorage.editFamily = JSON.stringify(f)
      this.$router.push('/setting/family/add?action=modify')
    }
  },
  destroyed () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>

<style lang="less" scoped>
.family-item {
    padding: 1em;
    margin-bottom: 0.6em;
    border-radius: 4px;
    .family-header {
      padding-bottom: .6em;
    }
    .title {
      font-size: 1.2em;
    }
    .icon-iconnan {
      color: #64A9F6;
      font-size: 1em;
    }
    .icon-iconnv {
      color: #F8868B;
      font-size: 1em;
    }
    p {
      margin: 0.6em 0 0 0;
      color: #666;
    }
    .right-button {
      position: absolute;
      right: 0;
      top: 10px;
    }
    .re {
      min-height: 40px;
    }
  }
</style>
